<template>
    <div class="w-full p-8 flex justify-center">
        <a-form :model="formState">
            <div class="flex-between">
                <div class="font-bold">微信商户号配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="微信商户ID:" name="wx_id" required>
                <a-input v-model:value="formState.wx_id" placeholder="请输入微信商户ID"></a-input>
            </a-form-item>

            <a-form-item label="微信商户密匙:" name="wx_key" required>
                <a-input v-model:value="formState.wx_key" placeholder="请输入微信商户密匙"></a-input>
            </a-form-item>

            <a-form-item label="回调地址:" name="path" required help="输入域名即可, 如: https://www.baidu.com">
                <a-input v-model:value="formState.qq_id" placeholder="请输入回调地址"></a-input>
            </a-form-item>

            <a-button @click.prevent="onSubmit" type="primary" html-type="submit" size="large">提交保存</a-button>

        </a-form>
    </div>
</template>

<script setup lang="ts">
const formState = reactive<{
    [key: string] : string
}>({
    wx_id: '',
    wx_key: '',
    path:''
})

const onSubmit = () => {
    alert(JSON.stringify(formState))
    reset()
}
const reset = () => {
    Object.keys(formState).forEach((key: string) => {
        formState[key] = ''
    })
}
</script>